<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>canvas-birdnest</title>
		<script src="../../js/lib/wind/wind-core.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/wind/wind-compiler.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/wind/wind-builderbase.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/wind/wind-async.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<a href="index2.html">async wind demo</a>
		<hr />
		<canvas id="myCanvas" width="350" height="350" style="border: solid 15px #222; background-color: #111;  color: #CCC;">  
			你的浏览器不支持canvas  
		</canvas>
		<br />
		<input id="Button2" type="button" value="run" onclick="return start()" />
		<input id="Button1" type="button" value="stop" onclick="return stop()" />
		<script type="text/javascript">
			var canvas;
			var ctx;
			var px = 0;
			var py = 0;

			function init() {
				canvas = document.getElementById("myCanvas");
				ctx = canvas.getContext("2d");
				ctx.strokeStyle = "#fff";
				ctx.translate(70, 70);
			}
			init();
			var i = 0;

			function drawEllipse(x, y, w, h) {
				var k = 0.5522848;
				var ox = (w / 2) * k;
				var oy = (h / 2) * k;
				var xe = x + w;
				var ye = y + h;
				var xm = x + w / 2;
				var ym = y + h / 2;
				ctx.beginPath();
				ctx.moveTo(x, ym);
				ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
				ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
				ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
				ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
				ctx.stroke();
				ctx.translate(x + 70, y + 100);
				px = -70;
				py = -100;
				ctx.rotate(10 * Math.PI * 2 / 360);
			}
			var ct;
			var drawAsync = eval(Wind.compile("async", function(ct) {
				while(true) {
					drawEllipse(px, py, 140, 200)
					$await(Wind.Async.sleep(200, ct));
				}
			}))

			function start() {
				ct = new Wind.Async.CancellationToken();
				drawAsync(ct).start();
			}

			function stop() {
				ct.cancel();
			}
		</script>
	</body>
</html>